<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收藏 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        /* 基础样式 */
        body {
            background-color: #f5f7fa;
            color: #333;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        
        .app-container {
            max-width: 375px; /* 标准小程序尺寸 */
            margin: 0 auto;
            background-color: #f5f7fa;
            min-height: 100vh;
        }
        
        /* 头部导航 */
        .page-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .back-button {
            border: none;
            background: none;
            font-size: 18px;
            color: #333;
            padding: 0;
            margin-right: 12px;
            display: flex;
            align-items: center;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        
        .page-title {
            font-size: 16px;
            font-weight: 600;
            flex: 1;
            text-align: center;
            margin: 0;
        }
        
        /* 分类标签栏 */
        .tab-container {
            background-color: #fff;
            border-bottom: 1px solid #eee;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .tab-list {
            display: flex;
            padding: 0;
            margin: 0;
            list-style: none;
            width: 100%;
        }
        
        .tab-item {
            flex: 1;
            padding: 14px 0;
            font-size: 14px;
            color: #666;
            text-align: center;
            position: relative;
            -webkit-tap-highlight-color: transparent;
            cursor: pointer;
            white-space: nowrap;
        }
        
        .tab-item.active {
            color: #4863dc;
            font-weight: 500;
        }
        
        .tab-item.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #4863dc;
        }
        
        .tab-item:active {
            opacity: 0.7;
        }
        
        /* 职位卡片 */
        .job-card {
            background-color: #fff;
            margin: 10px 0;
            padding: 16px;
            border-bottom: 1px solid #eee;
            box-shadow: none;
            border-radius: 0;
        }
        
        .job-header {
            display: flex;
            margin-bottom: 10px;
        }
        
        .company-logo {
            width: 48px;
            height: 48px;
            border-radius: 4px;
            background-color: #f5f5f5;
            border: 1px solid #eee;
            margin-right: 12px;
            object-fit: contain;
        }
        
        .job-info {
            flex: 1;
        }
        
        .job-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin: 0 0 6px 0;
        }
        
        .company-name {
            font-size: 13px;
            color: #666;
            margin: 0 0 6px 0;
            display: flex;
            align-items: center;
        }
        
        .company-name::before {
            content: '•';
            margin-right: 4px;
            color: #666;
        }
        
        .job-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .job-tag {
            background-color: #f0f2f5;
            color: #666;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 2px;
        }
        
        .job-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .job-salary {
            color: #ff6b6b;
            font-weight: 500;
            font-size: 14px;
        }
        
        .job-location {
            color: #999;
            font-size: 12px;
            display: flex;
            align-items: center;
        }
        
        .location-icon {
            margin-right: 2px;
            font-size: 12px;
        }
        
        /* 操作按钮 */
        .action-group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;
        }
        
        .like-button {
            color: #ff6b6b;
            background: none;
            border: none;
            padding: 0;
            font-size: 20px;
            cursor: pointer;
        }
        
        .apply-button {
            background-color: #4863dc;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            padding: 6px 14px;
            cursor: pointer;
        }
        
        .apply-button:active {
            opacity: 0.85;
        }
        
        /* 院校卡片样式 */
        .school-card {
            background-color: #fff;
            margin: 10px 0;
            padding: 16px;
            border-bottom: 1px solid #eee;
            box-shadow: none;
            border-radius: 0;
        }
        
        .school-header {
            display: flex;
            margin-bottom: 10px;
        }
        
        .school-logo {
            width: 48px;
            height: 48px;
            border-radius: 4px;
            background-color: #f5f5f5;
            border: 1px solid #eee;
            margin-right: 12px;
            object-fit: contain;
        }
        
        .school-info {
            flex: 1;
        }
        
        .school-name {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin: 0 0 6px 0;
        }
        
        .school-type {
            font-size: 13px;
            color: #666;
            margin: 0 0 6px 0;
        }
        
        .school-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
        }
        
        .school-tag {
            background-color: #f0f2f5;
            color: #666;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 2px;
        }
        
        .school-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .school-rank {
            color: #4863dc;
            font-weight: 500;
            font-size: 14px;
        }
        
        .school-location {
            color: #999;
            font-size: 12px;
            display: flex;
            align-items: center;
        }
        
        /* 空状态 */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 0;
            height: 300px;
        }
        
        .empty-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 16px;
            color: #ccc;
            font-size: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f7f7f7;
            border-radius: 50%;
        }
        
        .empty-text {
            color: #999;
            margin: 0;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="page-header">
            <button class="back-button" onclick="history.back()">
                <i class="bi bi-chevron-left"></i>
            </button>
            <h1 class="page-title">我的收藏</h1>
        </header>
        
        <!-- 分类标签栏 -->
        <div class="tab-container">
            <ul class="tab-list">
                <li class="tab-item active" data-type="all">全部</li>
                <li class="tab-item" data-type="job">职位</li>
                <li class="tab-item" data-type="company">公司</li>
                <li class="tab-item" data-type="school">院校</li>
            </ul>
        </div>
        
        <!-- 职位列表 -->
        <div class="favorites-list" id="favoritesList">
            <!-- 字节跳动职位 -->
            <div class="job-card" data-type="job">
                <div class="job-header">
                    <img src="../img/company1.jpg" alt="公司Logo" class="company-logo">
                    <div class="job-info">
                        <h3 class="job-title">前端开发工程师</h3>
                        <p class="company-name">字节跳动</p>
                    </div>
                </div>
                <div class="job-tags">
                    <span class="job-tag">Vue</span>
                    <span class="job-tag">React</span>
                    <span class="job-tag">3年经验</span>
                </div>
                <div class="job-bottom">
                    <div class="job-salary">25k-35k/月</div>
                    <div class="job-location">
                        <i class="bi bi-geo-alt-fill location-icon"></i>
                        <span>北京</span>
                    </div>
                </div>
                <div class="action-group">
                    <button class="like-button">
                        <i class="bi bi-heart-fill"></i>
                    </button>
                    <button class="apply-button">立即申请</button>
                </div>
            </div>
            
            <!-- 阿里巴巴职位 -->
            <div class="job-card" data-type="job">
                <div class="job-header">
                    <img src="../img/company3.jpg" alt="公司Logo" class="company-logo">
                    <div class="job-info">
                        <h3 class="job-title">Java后端开发</h3>
                        <p class="company-name">阿里巴巴</p>
                    </div>
                </div>
                <div class="job-tags">
                    <span class="job-tag">Java</span>
                    <span class="job-tag">Spring</span>
                    <span class="job-tag">微服务</span>
                </div>
                <div class="job-bottom">
                    <div class="job-salary">30k-50k/月</div>
                    <div class="job-location">
                        <i class="bi bi-geo-alt-fill location-icon"></i>
                        <span>杭州</span>
                    </div>
                </div>
                <div class="action-group">
                    <button class="like-button">
                        <i class="bi bi-heart-fill"></i>
                    </button>
                    <button class="apply-button">立即申请</button>
                </div>
            </div>
            
            <!-- 腾讯职位 -->
            <div class="job-card" data-type="job">
                <div class="job-header">
                    <img src="../img/company2.jpg" alt="公司Logo" class="company-logo">
                    <div class="job-info">
                        <h3 class="job-title">产品经理</h3>
                        <p class="company-name">腾讯</p>
                    </div>
                </div>
                <div class="job-tags">
                    <span class="job-tag">产品设计</span>
                    <span class="job-tag">数据分析</span>
                    <span class="job-tag">本科以上</span>
                </div>
                <div class="job-bottom">
                    <div class="job-salary">20k-35k/月</div>
                    <div class="job-location">
                        <i class="bi bi-geo-alt-fill location-icon"></i>
                        <span>深圳</span>
                    </div>
                </div>
                <div class="action-group">
                    <button class="like-button">
                        <i class="bi bi-heart-fill"></i>
                    </button>
                    <button class="apply-button">立即申请</button>
                </div>
            </div>
            
            <!-- 清华大学 -->
            <div class="school-card" data-type="school">
                <div class="school-header">
                    <img src="../img/school1.jpg" alt="院校Logo" class="school-logo">
                    <div class="school-info">
                        <h3 class="school-name">清华大学</h3>
                        <p class="school-type">综合类 · 985/211</p>
                    </div>
                </div>
                <div class="school-tags">
                    <span class="school-tag">计算机科学</span>
                    <span class="school-tag">人工智能</span>
                    <span class="school-tag">工程学</span>
                </div>
                <div class="school-bottom">
                    <div class="school-rank">全国排名：1</div>
                    <div class="school-location">
                        <i class="bi bi-geo-alt-fill location-icon"></i>
                        <span>北京</span>
                    </div>
                </div>
                <div class="action-group">
                    <button class="like-button">
                        <i class="bi bi-heart-fill"></i>
                    </button>
                    <button class="apply-button">查看详情</button>
                </div>
            </div>
            
            <!-- 北京大学 -->
            <div class="school-card" data-type="school">
                <div class="school-header">
                    <img src="../img/school2.jpg" alt="院校Logo" class="school-logo">
                    <div class="school-info">
                        <h3 class="school-name">北京大学</h3>
                        <p class="school-type">综合类 · 985/211</p>
                    </div>
                </div>
                <div class="school-tags">
                    <span class="school-tag">经济学</span>
                    <span class="school-tag">法学</span>
                    <span class="school-tag">理学</span>
                </div>
                <div class="school-bottom">
                    <div class="school-rank">全国排名：2</div>
                    <div class="school-location">
                        <i class="bi bi-geo-alt-fill location-icon"></i>
                        <span>北京</span>
                    </div>
                </div>
                <div class="action-group">
                    <button class="like-button">
                        <i class="bi bi-heart-fill"></i>
                    </button>
                    <button class="apply-button">查看详情</button>
                </div>
            </div>
            
            <!-- 上海交通大学 -->
            <div class="school-card" data-type="school">
                <div class="school-header">
                    <img src="../img/school3.jpg" alt="院校Logo" class="school-logo">
                    <div class="school-info">
                        <h3 class="school-name">上海交通大学</h3>
                        <p class="school-type">理工类 · 985/211</p>
                    </div>
                </div>
                <div class="school-tags">
                    <span class="school-tag">机械工程</span>
                    <span class="school-tag">电子信息</span>
                    <span class="school-tag">生物医学</span>
                </div>
                <div class="school-bottom">
                    <div class="school-rank">全国排名：3</div>
                    <div class="school-location">
                        <i class="bi bi-geo-alt-fill location-icon"></i>
                        <span>上海</span>
                    </div>
                </div>
                <div class="action-group">
                    <button class="like-button">
                        <i class="bi bi-heart-fill"></i>
                    </button>
                    <button class="apply-button">查看详情</button>
                </div>
            </div>
            
            <!-- 浙江大学 -->
            <div class="school-card" data-type="school">
                <div class="school-header">
                    <img src="../img/school4.jpg" alt="院校Logo" class="school-logo">
                    <div class="school-info">
                        <h3 class="school-name">浙江大学</h3>
                        <p class="school-type">综合类 · 985/211</p>
                    </div>
                </div>
                <div class="school-tags">
                    <span class="school-tag">计算机</span>
                    <span class="school-tag">生物工程</span>
                    <span class="school-tag">医学</span>
                </div>
                <div class="school-bottom">
                    <div class="school-rank">全国排名：4</div>
                    <div class="school-location">
                        <i class="bi bi-geo-alt-fill location-icon"></i>
                        <span>杭州</span>
                    </div>
                </div>
                <div class="action-group">
                    <button class="like-button">
                        <i class="bi bi-heart-fill"></i>
                    </button>
                    <button class="apply-button">查看详情</button>
                </div>
            </div>
            
            <!-- 空状态提示，默认隐藏 -->
            <div class="empty-state" style="display: none;">
                <div class="empty-icon">
                    <i class="bi bi-bookmark"></i>
                </div>
                <p class="empty-text">暂无收藏内容</p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 标签切换功能
            const tabs = document.querySelectorAll('.tab-item');
            const favoritesList = document.getElementById('favoritesList');
            const favoriteItems = favoritesList.querySelectorAll('.job-card, .school-card');
            const emptyState = document.querySelector('.empty-state');
            
            // 确保所有卡片默认可见
            favoriteItems.forEach(item => {
                item.style.display = 'block';
            });
            
            // 初始化显示内容 - 显示全部内容
            filterItems('all');
            
            // 为所有标签添加点击事件
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 更新标签状态
                    tabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 获取当前选中的类型
                    const selectedType = this.getAttribute('data-type');
                    
                    // 应用过滤器
                    filterItems(selectedType);
                });
            });
            
            // 过滤器函数
            function filterItems(selectedType) {
                // 筛选显示对应类型的卡片
                let visibleCount = 0;
                
                favoriteItems.forEach(item => {
                    const itemType = item.getAttribute('data-type');
                    
                    if (selectedType === 'all' || selectedType === itemType) {
                        item.style.display = 'block';
                        visibleCount++;
                    } else {
                        item.style.display = 'none';
                    }
                });
                
                // 显示或隐藏空状态
                if (visibleCount === 0) {
                    emptyState.style.display = 'flex';
                } else {
                    emptyState.style.display = 'none';
                }
            }
            
            // 取消收藏功能
            const likeButtons = document.querySelectorAll('.like-button');
            
            likeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const itemCard = this.closest('.job-card, .school-card');
                    
                    // 添加淡出动画
                    itemCard.style.transition = 'opacity 0.3s, transform 0.3s';
                    itemCard.style.opacity = '0';
                    itemCard.style.transform = 'translateX(20px)';
                    
                    // 显示取消收藏提示
                    showToast('已取消收藏');
                    
                    // 移除元素
                    setTimeout(() => {
                        itemCard.remove();
                        
                        // 检查是否需要显示空状态
                        const currentType = document.querySelector('.tab-item.active').getAttribute('data-type');
                        const visibleItems = Array.from(favoritesList.querySelectorAll('.job-card, .school-card')).filter(item => {
                            const itemType = item.getAttribute('data-type');
                            return currentType === 'all' || currentType === itemType;
                        });
                        
                        if (visibleItems.length === 0) {
                            emptyState.style.display = 'flex';
                        }
                    }, 300);
                });
            });
            
            // 立即申请/查看详情按钮
            const actionButtons = document.querySelectorAll('.apply-button');
            
            actionButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const itemCard = this.closest('.job-card, .school-card');
                    const itemType = itemCard.getAttribute('data-type');
                    
                    // 添加点击反馈
                    this.style.transform = 'scale(0.95)';
                    setTimeout(() => {
                        this.style.transform = 'scale(1)';
                    }, 100);
                    
                    // 根据不同类型跳转到不同页面
                    if (itemType === 'job') {
                        const jobTitle = itemCard.querySelector('.job-title').textContent;
                        const companyName = itemCard.querySelector('.company-name').textContent;
                        
                        // 根据公司名确定jobId
                        let jobId = '1001';  // 默认ID
                        
                        if (companyName.includes('字节跳动')) {
                            jobId = '1001';
                        } else if (companyName.includes('腾讯')) {
                            jobId = '1002';
                        } else if (companyName.includes('阿里巴巴')) {
                            jobId = '1003';
                        }
                        
                        // 跳转到职位详情页
                        window.location.href = `internship-detail.html?id=${jobId}`;
                    } else if (itemType === 'school') {
                        const schoolName = itemCard.querySelector('.school-name').textContent;
                        
                        // 根据学校名确定schoolId
                        let schoolId = '2001';  // 默认ID
                        
                        if (schoolName.includes('清华大学')) {
                            schoolId = '2001';
                        } else if (schoolName.includes('北京大学')) {
                            schoolId = '2002';
                        } else if (schoolName.includes('上海交通大学')) {
                            schoolId = '2003';
                        } else if (schoolName.includes('浙江大学')) {
                            schoolId = '2004';
                        }
                        
                        // 跳转到院校详情页
                        window.location.href = `school-detail.html?id=${schoolId}`;
                    }
                });
            });
            
            // 显示Toast消息提示
            function showToast(message) {
                // 检查是否已存在Toast元素
                let toast = document.querySelector('.toast-message');
                if (!toast) {
                    toast = document.createElement('div');
                    toast.className = 'toast-message';
                    document.body.appendChild(toast);
                }
                
                // 设置消息并显示
                toast.textContent = message;
                toast.style.display = 'block';
                toast.style.opacity = '0';
                
                // 添加样式
                toast.style.position = 'fixed';
                toast.style.bottom = '20%';
                toast.style.left = '50%';
                toast.style.transform = 'translateX(-50%)';
                toast.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
                toast.style.color = 'white';
                toast.style.padding = '10px 16px';
                toast.style.borderRadius = '4px';
                toast.style.fontSize = '14px';
                toast.style.zIndex = '1000';
                toast.style.transition = 'opacity 0.3s ease';
                
                // 淡入效果
                setTimeout(() => {
                    toast.style.opacity = '1';
                }, 10);
                
                // 3秒后淡出
                setTimeout(() => {
                    toast.style.opacity = '0';
                    setTimeout(() => {
                        toast.style.display = 'none';
                    }, 300);
                }, 2000);
            }
        });
    </script>
</body>
</html> 